(function($, doc){
    //loading图标模板.
    var _loadingIconTmp = [
        '<div id="loadingAnimation">',
            '<div id="loadingAnimation_1" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_2" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_3" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_4" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_5" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_6" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_7" class="loadingAnimation"></div>',
            '<div id="loadingAnimation_8" class="loadingAnimation"></div>',
        '</div>'
    ].join('');
    
    //区域遮罩层.
	ujs.define('paneMask', 'ujs.ui', {	    
	    /**
	     * 显示区域 Mask.
         * @param {Selector} pane : Pane Selector.
         * @param {String} msg : Mask上面显示的提示消息.当msg的值为loading时，显示loading加载图标（图标由css3技术支持）。
         * @param {String} theme : Mask皮肤.
	     */
		show : function(pane, msg, theme){		    	    
		    var $pane = $(pane || doc.body);
		    
		    if(Type.isNumber(msg) && parseInt(msg) <= 1){
		        //进度条.
		        msg = '<progress value="{0}"></progress>'.format(msg);
		    }
		    msg = String(msg || '');		    
            msg = ['loading', 'load'].contains(msg.toLowerCase()) ? _loadingIconTmp : msg;	
            	    
		    if(!$pane.size() || $pane.find('.paneMask').size()){  //若pane不存在或pane中已经存在mask实例, 不重复生成，仅更新 msg。		        		        
		        if(msg){
		            $pane.find('.paneMask .paneMaskMsg').html(msg);
		        }
		        return false;
		    } else {  //使pane为容器元素.		        
		        if(!['relative', 'absolute', 'fixed'].contains( $pane.css('position') )){
		            $pane.css('position', 'relative');
		        }
		    }	

        	//生成mask主体内容.
			var $paneMask = $([
			    '<div class="paneMask">',
					'<table>',
						'<tr>',
							'<td class="paneMaskMsg" style="vertical-align:middle;text-align:center;">{0}</td>'.format( msg ),
						'</tr>',
					'</table>',
				'</div>'
			].join('')).appendTo($pane);	
			
			//mask皮肤.
            if(theme){               
                $paneMask.removeClass().addClass('paneMask').addClass(theme);
            }
			
			$paneMask.show();		
		},
		/**
		 * 隐藏mask时，删除之；再显示时，重新生成mask。
		 */
		hide : function(){
			this.remove.apply(this, Array.prototype.slice.call(arguments));			
		},
		/**
		 * 删除指定pane中的mask实例。
         * @param {Selector} pane
		 */
		remove : function(pane){
		    $(pane || doc.body).find('>.paneMask').hide('fast').remove();
		},
		/**
		 * 判断指定的pane中是否存在mask实例。
         * @param {Selector} pane 
		 */
		isMasked : function(pane){
		    return !!$(pane || doc.body).find('>.paneMask').size();
		}
	});
	
	//------------------------------------注册为jQuery插件，方便调用--------------------------------------------
	
	$.fn.showMask = function(msg, theme){
        ujs.ui.paneMask.show(this, msg, theme);    
    };
    
    $.fn.hideMask = function(){
        ujs.ui.paneMask.hide(this);
    };
    
    $.fn.isMasked = function(){
        return ujs.ui.paneMask.isMasked(this);
    };
    
})($, document);